<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meter showcase</title>
    <style>
        meter {
            width: 50%;
        }
    </style>
</head>
<body>
    <p>
        <button onclick="randomize()">Randomize meters</button>
    </p>

    <p>Basic meters:</p>
    <p>
        <meter value="0.5">0.5%<br>50%<br>that is a half</meter>
    </p>
    <p>
        <meter value="4" max="10">4/10</meter>
    </p>
    <p>
        <meter min="1" value="3" max="10">grade 3</meter>
    </p>

    <p>Meters with values outside <code>low</code> and <code>high</code></p>
    <p>
        <meter low="4" value="1" max="10"></meter>
    </p>
    <p>
        <meter low="4" high="6" value="9" max="10"></meter>
    </p>

    <p>Meters with values outside <code>optimum</code></p>
    <p>
        <meter low="4" high="6" value="9" max="10" optimum="1"></meter>
    </p>

    <p>Meters with values outside <code>min</code> and <code>max</code></p>
    <p>
        <meter low="4" value="1" high="5" min="3" max="10" optimum="10"></meter>
    </p>
    <p>
        <meter low="4" value="3" high="5" min="1" max="2" optimum="10"></meter>
    </p>

    <script>
        function rand(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        function randomize() {
            for (const meter of Array.from(document.querySelectorAll('meter'))) {
                meter.value = rand(meter.min * 10, meter.max * 10) / 10;
            }
        }
    </script>
</body>
</html>
